<template>
  <div class="menu-container">
    <ContactItem
      v-for="item in menuList"
      :key="item.href"
      :icon="item.icon"
      :text="item.text"
      :href="item.name"
      :showPop="false"
    />
  </div>
</template>

<script>
import ContactItem from "@/components/ContactItem";
export default {
  name: "Menu",
  components: {
    ContactItem,
  },
  data() {
    return {
      menuList: [
        {
          icon: "home",
          text: "首页",
          name: "Home",
          withStart: false,
        },
        {
          icon: "blog",
          text: "文章",
          name: "Blog",
          withStart: true,
        },
        {
          icon: "about",
          text: "关于我",
          name: "About",
          withStart: false,
        },
        {
          icon: "code",
          text: "项目&效果",
          name: "Project",
          withStart: false,
        },
        {
          icon: "chat",
          text: "留言板",
          name: "Message",
          withStart: false,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
.menu-container {
  gap: 15px;
  display: flex;
  flex-direction: column;
}

.contactitem-container {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 3px;
  padding-left: 25px;
  font-size: 16px;

  &.active {
    background-color: #2d2d2d;
    color: #fff;
  }
}
</style>
